题 目:韩国A3动态弹性菜单分步学
A3菜单有不少翻版或改进,虽然出来了好长一段时间,但依然可谓经典的AS菜单之作!我们以小雨翻版的A3菜单为例!
他的难度在于是通过AS来控制每个菜单项的空间位置,且还伴有弹性的效果!如果空间感不强,就算每行代码注释,也很难形成完整的概念,将其理解透!因为分步进行讲解!
下面是通过练习为A3的制作准备知识点,如果你已经熟悉,完全可以直接看二楼的帖子!
第一步练习:
动态生成菜单项:
首先建立一个方块MC,在库文件中点属性,勾选1,4两项,标识符:menu 。如下图所示
然后,在时间轴第一帧写出以下代码:
///////////////////////下面这段7个函数(b1()~b7())是保存菜单地址,可以让按钮随时调用
stop();
function b1()
{ trace("b1 pressed");
getURL("http://1.htm");
}
function b2()
{ trace("b2 pressed");
getURL("http://2.htm");
}
function b3()
{ trace("b3 pressed");
getURL("http://3.htm");
}
function b4()
{ trace("b4 pressed");
getURL("http://3.htm");
}
function b5()
{ trace("b5 pressed");
getURL("http://5.htm");
}
function b6()
{ trace("b6 pressed");
getURL("http://6.htm");
}
function b7()
{ trace("b7 pressed");
getURL("http://7.htm");
}
///////////////////////////////下面是确定菜单的位置及菜单名填写
for (i = 1; i <=7; i++)
{
_root.attachMovie("menu", "menu" + i, i * 10);
_root["menu" + i]._y = 100;
_root["menu" + i]._x = (i - 1) * 70;//菜单项的X轴坐标
_root["menu" + i].label_txt.text= i;//菜单的标签(1~7)
_root["menu" + i].num = i;//菜单中的一个变量
}
//////////////////////////////////////////////////而接着下面是为按钮动态地调用上面的函数添加地址
for (var i = 1;i<=7;i++){
this["menu"+i].onRelease = function(){
_root["b"+this.num]();
/////////////////////////////////////
//也可写成下面这样!
/* s=eval("b"+this.num);
_root.s();*/
///////////////////////////////////
}
}
选项的弹性位移:
主场景中有个名为mc的实例: 则在mc上的代码为:
onClipEvent (load) {
前面mc位置 = 240;
this.targetPos=前面位置+min_h;
this._x=前面位置+min_h;
this.vx=0;
var max_h = 120;
//选项最大位置
var min_h = 90;
//选项最小位置
var slow = 1.2;
//弹性缓冲值
var active = false;
//判断是否为激活
}
onClipEvent (enterFrame) {
if (active) {
//mc目标位置=前面mc位置+最大位置
this.targetPos = 前面mc位置+max_h;
this.vx = (this.vx+(this.targetPos-this._x))/slow;
this._x = this._x+this.vx;
} else {
//mc目标位置=前面mc位置+最小位置
this.targetPos = 前面mc位置+min_h;
//与上面讲得弹性运动方式相同,只不过这里是还原!
this.vx = (this.vx+(this.targetPos-this._x))/slow;
this._x = this._x+this.vx;
}
}
on (rollOver, dragOver) {
active = true;
}
on (rollOut, dragOut) {
active = false;
}
|